import { Component, AfterViewInit, ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams, InfiniteScroll, Refresher, Content, Img } from 'ionic-angular';
import { Park } from "../../providers/park-data/park";
import { ParkDataProvider } from '../../providers/park-data/park-data';
import { updateImgs } from 'ionic-angular/components/content/content';
import { ParkDetailPage } from '../park-detail/park-detail';
import * as _ from "lodash";
/**
 * Generated class for the ParkListPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-park-list',
  templateUrl: 'park-list.html',
})
export class ParkListPage implements AfterViewInit{
  @ViewChild(Content) _content:Content;
  parks : Park[] = [];

  private num:number = 10;//每页显示记录数
  private curPage: number =1;//当前页号
  private hasMore:boolean = true;//是否有更多数据
  private isSearch:boolean =false;

  constructor(
    public navCtrl: NavController, 
    public navParams: NavParams,
    public parkDataProvider :ParkDataProvider
    ) {
  }

  ionViewDidLoad() {
    this.getParks(this.num,this.curPage);
  }
  /**
   * 分页获取景区信息
   * @param num 
   * @param page 
   */
  getParks(num: number,page: number): void{
    this.parkDataProvider.getParks(num,page).subscribe(parks=>{
      // this.parks = parks;
      //保留原有数据
      if(parks.length>0){
        this.parks = this.parks.concat(parks);
      }else{
        this.hasMore=false;
      }
    });
  }

    //111111111
  /**
   * 向下滚动加载更过数据
   * @param infiniteScroll 
   */
  doInfinite(infiniteScroll: InfiniteScroll):void{
    if(!this.hasMore){
      infiniteScroll.complete();
      return;
    }
    setTimeout(() => {
      this.curPage +=1;
      this.getParks(this.num,this.curPage);
      infiniteScroll.complete();
    }, 500);

  }
/**
 * 下拉数据刷新
 * @param refresher 
 */
  doRefresh(refresher:Refresher):void{
    setTimeout(() => {
      this.curPage = 1;
      this.getParks(this.num,this.curPage);
      refresher.complete();
    }, 1000);
  }


  itemTapped(park:Park):void{
    this.navCtrl.push(ParkDetailPage,{park:park});
  }

  searchParks(event: any){
    let query :string = event.target.value;
    if(query && query.length > 0){
      query  = query.trim();
      this.parkDataProvider.getParksFromCache()
      .then(res=>{
        let _parks : Park[] = [];
        if(res && res.rows && res.rows.length >0){
          console.log(`查询结果集：${res.rows.length}`);
          for (let i = 0; i < res.rows.length; i++) {
            _parks.push({
              objectId: res.rows.item(i).objectId,
              name: res.rows.item(i).name,
              point:res.rows.item(i).point
            }as Park);
            
          }
      }
      return _parks;

      })
      .then(parks=>{
        parks =_.filter(parks,(park:Park)=>{
          return park.name.lastIndexOf(query)>=0;
        });
        console.log(`搜索到${parks.length}条记录`);
        if(parks.length>0){
          this.isSearch =true;
          //多个OnjectId的访问
          


        }
      });
    }
  }

  resetParks(event: any){
    this.curPage =1;
    this.isSearch = false;
    this.parks = [];
    this.getParks(this.num,this.curPage);
  }



  ngAfterViewInit():void {
    //修补在Virtual-Scroll中图片显示问题
    if(this._content)//如果内容获取成功
    {
      this._content.imgsUpdate = ()=>{//重新绑定操作
        if(this._content._scroll.initialized && this._content._imgs.length &&
          this._content.isImgsUpdatable())
          {
            this._content._imgs.forEach((img: Img)=>{img._rect=null});
            updateImgs(this._content._imgs,this._content._cTop * -1,
              this._content.contentHeight,this._content.directionY,1400,400);
          }
      };
    }
  }

}
